<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:#f5f6fa;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view
      class="close-button"
      @click="$emit('update:show', false)"
    >
      <wd-icon
        name="close"
        size="36rpx"
        color="#333333"
      />
    </view>
    <view class="title">
      物流详情
    </view>
    <view class="header">
      <view>
        {{ order.express?.delivery_name }}
      </view>
      <view>
        {{ order.express?.delivery_no }}
      </view>
      <view
        class="copy-button"
        @click="copyHandle"
      >
        复制
      </view>
    </view>
    <view
      v-if="timeline"
      class="timeline"
    >
      <v-timeline :list="timeline" />
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import { formateDateTime } from '@/utils/formater';

const props = defineProps<{
  show: boolean;
  order: OrderVO;
}>();

defineEmits<{
  'update:show': [val: boolean];
}>();

const order = toRef(props, 'order');

const timeline = computed(() => {
  if (!order.value.express?.detail_list) return;
  return order.value.express.detail_list.map((item) => ({
    title: item.status,
    sub: formateDateTime(item.create_time, 'M-DD hh:mm'),
    content: item.context
  }));
});

const copyHandle = () => {
  if (!order.value.express?.delivery_no) return;
  uni.setClipboardData({
    data: order.value.express.delivery_no,
    success: () => {
      uni.showToast({ title: '复制成功', icon: 'none' });
    }
  });
};
</script>

<style lang="scss" scoped>
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  text-align: center;
}

.header {
  display: flex;
  align-items: center;
  line-height: 60rpx;
  gap: 8rpx;
  margin: 0 24rpx 24rpx;
  .copy-button {
    padding: 4rpx 8rpx;
    color: #ff2f3b;
  }
}
.timeline {
  margin: 0 24rpx 24rpx;
}
</style>
